/**************** 公共页面样式 ****************/

@import '../plugins/normalize.scss';
@import './module-styles/define-styles.scss';
@import '../plugins/short-tips.scss';
@import './module-styles/modal.scss';

/******** 公共页面样式变量 ********/
$header-height: 80px;
$footer-height: 50px;

/******** 全局样式自定义部分 ********/
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font: $base-font;
}

body {
  background: fixed url('../images/bgimg/scenery-02.jpg') no-repeat center
    bottom / cover;
}

header {
  height: $header-height;
  background-color: $theme-bgcolor;
  color: $theme-color;

  .center-block {
    height: 100%;
    @include center-block;
    display: flex;
    justify-content: space-between;
  }

  // Logo组
  .logo-group {
    height: 100%;

    a {
      height: 100%;
      text-decoration: none;
      font-size: 1.68rem;
      color: #3d3d3d;
      display: flex;
      justify-content: flex-start;
      align-items: center;

      img {
        height: 80%;
        display: block;
      }

      .logo-text {
        margin-left: 18px;
      }
    }
  }

  // 导航栏
  nav {
    ul {
      height: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;

      li {
        height: 100%;

        a {
          height: 100%;
          padding: 0 36px;
          text-align: center;
          text-decoration: none;
          font-size: 1.4em;
          color: #ffffff;
          display: flex;
          align-items: center;

          &.active {
            background-color: #3d3d3d;
          }
        }
      }
    }
  }
}

main {
  height: calc(100% - ($header-height + $footer-height));
  overflow: hidden auto;
  padding-bottom: 32px;

  & > article {
    @include center-block(45px);
  }
}

footer {
  width: 100%;
  height: $footer-height;
  background-color: $footer-bgcolor;
  text-align: center;
  line-height: $footer-height;
  color: $theme-color;
}
